<template>
  <div class="titleBox">
    <div class="blueTitleStyle title"
         @click="toDetails">{{titleName}}</div>
    <div class="titleBox-con">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class titleBox extends Vue {
  @Prop() titleName!: any;
  public toDetails(): void {
    this.$emit("toDetails")
  }
}
</script>

<style lang="scss" scoped>
.titleBox {
  width: 100%;
  height: 100%;
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding-left: 0.2rem;
    cursor: pointer;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
  }
}
</style>

